<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.4/lib/index.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.4/lib/index.css">

    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <link rel="stylesheet" href="/css/global.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.4/lib/vant.min.js"></script>
    <!--    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
    <script src="https://cdn.bootcss.com/qs/6.5.2/qs.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>
</head>
<style>
    .wave {
        width: 100%;
        position: relative;
        overflow: hidden;
        margin-top: 10px;
    }

    .wave img {
        width: 400%;
        position: relative;

    }

    @keyframes rowup {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(-50%);
        }
    }

    .wave img {
        animation: rowup 8s linear infinite;
        -moz-animation: rowup 8s linear infinite;
        -webkit-animation: rowup 8s linear infinite;
        -o-animation: rowup 8s linear infinite;
    }


</style>
<body>
<div class="bg"></div>
<div id="app">
    <van-row>
        <van-col span="24">
            <div class="box m-4" style="background: linear-gradient(to right, #4bb0ff, #aa9cff)">
                <div class="d-flex align-items-center">
                    <div class="p-3">
                        <van-image
                                round
                                width="60"
                                height="60"
                                src="https://img.yzcdn.cn/vant/cat.jpeg"
                        />
                    </div>
                    <div class="color-white ml-3 d-flex align-items-center">
                        <span>aaa</span>
                        <span><van-icon name="edit" size="12"/></span>
                    </div>
                </div>
                <div class="wave">
                    <img src="../image/wave.png">
                </div>
            </div>
        </van-col>
        <van-col span="24">
            <div class="box ml-4 mr-4">
                <ul class="my-list">
                    <li @click="toHealthData">
                        <van-icon name="like" color="#ff7070"></van-icon>
                        <span class="ml-2">健康资料</span>
                    </li>
                    <li @click="toHealthRecord">
                        <van-icon class="color-main" name="column"></van-icon>
                        <span class="ml-2">健康方案</span>
                    </li>
                    <li>
                        <van-icon name="../image/icon.png"></van-icon>
                        <span class="ml-2">我的食物</span>
                    </li>
                    <li>
                        <van-icon name="../image/icon2.png"></van-icon>
                        <span class="ml-2">我的运动</span>
                    </li>
                </ul>
            </div>
        </van-col>
        <van-col span="24">
            <div style="height: 80px;"></div>
            <div class="fixed-bottom p-2 bg-white" style="box-sizing: border-box">
                <van-button square color="linear-gradient(to right, #4bb0ff, #6149f6)" block @click="toIndex">主页
                </van-button>
            </div>
        </van-col>
    </van-row>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data() {
            return {};
        },
        methods: {
            onClickLeft() {
                window.location.href = "../jumpto/toIndex";
                console.log("hello");
                Toast('返回');
            },
            onSubmit(values) {
                console.log('submit', values);
            },
            onConfirm(value) {
                this.value = value;
                this.showPicker = false;
            },
            showPopup() {
                this.show = true;
            },
            toHealthData() {
                window.location.href = "../personUser/toHealtheyData";
            },
            toIndex() {
                window.location.href = "../jumpto/toIndex";
            },
            toHealthRecord() {

            },
        },
    });
</script>
</html>